'use strict';
import {createElement, Component,render} from 'rax';
import {View,Text,Layout,Button,Touchable,Link,Image} from 'nuke';
import styles from './index.less';
const { MultiRow ,Grid,Col}  = Layout;

class Items extends Component {
    constructor(props) {
      super(props);
	  	this.state={
			width:"",
			height:"",
		}
    }
	onLoad(img){
		let width = img.size.naturalWidth;
		let height = img.size.naturalHeight;
			height = (360*height)/width;
			width = 360;
		this.setState({width:width+"rem",height:height+"rem"});
	}
    render() {
	   const priceText = this.props.showPrice?
							<Text style={styles.price} >原价￥{this.props.item.price}</Text>
					:"";
        return (
			<View style={styles.gridcell}>
				<View style={{width:"360rem",height:"360rem",overflow:"hidden",backgroundColor:"#f0f0f0",borderTopLeftRadius:"10rem",borderTopRightRadius:"10rem"}}>
					<Link href={"https://h5.m.taobao.com/awp/core/detail.htm?id="+this.props.item.num_iid}>
						<Image src={this.props.item.pic_url} style={{width:this.state.width,height:this.state.height,borderTopLeftRadius:"10rem",borderTopRightRadius:"10rem"}} onLoad={this.onLoad.bind(this)}/>
					</Link>
				</View>
				<Text style={styles.funTitle}>{this.props.item.name.substr(0,24)}</Text>
				<Grid style={styles.p}>
					<Text style={styles.y}>￥</Text>
					<Text style={styles.final_price}>{this.props.item.final_price}</Text>
					<Text style={styles.price}>￥{this.props.item.price}</Text>
					<Text style={styles.time}>{this.props.notice}</Text>
					{priceText}
				</Grid>
			</View>  
        );
    }
}
export default Items;
